Components › Forms & input › Date & time › Time field

Time field

canon

Input that parses typed times with a list of quarter-hour options.

acrm !4087 (28 Sep 2026, owner): the visible duration next to times uses `fmtDurShort` — „45 m“ · „1 h“ · „1 h 30 m“ (in the context of time „m“ = minutes). Screen readers keep the full „min“ via `fmtDur` (TimeField option aria-label, DateTimeRange hidden live text) so „m“ is not read as metres. Other durations in the app (timeline, Setkání, tasks, reminders) keep „min“.

Used in 9 files · 7 areas · 15× — components/assistant, components/callwrapup, components/mail, components/meetings, components/tasks, components/timeline …

@acrm/ui <TimeField>.dp-field .dp-timelist .dp-toptSourceStoryLegacy card dates.html
ExamplesCodeUsageAccessibilityChangelog

Keyboard

  • Tab reaches the input; ↓ opens the list and moves focus to the selected (or first) option, scrolled into view.
  • In the list ↑/↓ move between options, Enter or Space picks, Esc closes and returns focus to the input.
  • Enter in the input commits the typed text and closes the list; blur commits valid text or reverts.
  • If the field unmounts while typing (popover closed by an outside click) the valid text is still flushed to onChange.

ARIA

  • Input aria-label (default "Čas", "Od" / "Do" in a range); autocomplete="off".
  • List role="listbox" + aria-label; options role="option" with aria-selected.
  • Panel role="dialog" from Picker panel.
  • The duration column .d is part of the option text, so it is read with the time.

Focus

  • Field ring: .dp-field:focus-within — accent border + 3px color-mix(--accent 16%) shadow.
  • Option ring: .dp-topt:focus-visible — 0 0 0 1px var(--accent), 0 0 0 4px color-mix(--accent 16%), outline: 0.
  • Closing from the list returns focus to the input; closing from the scrim does not (onClose only hides).

Contrast

  • Value --fg on --surface-100: 17.59:1 light, 14.53:1 dark.
  • Selected option --accent-ink on --surface-100: 5.31:1 light, 6.82:1 dark.
  • Duration column --fg-muted (11px overline): 2.85:1 light, 3.63:1 dark — below AA.
  • Placeholder "–" --fg-muted: 2.85:1 light.

Known limits

  • No visible error state; a wrong entry silently reverts on blur.
  • Duration column and placeholder are below AA 4.5:1 in light mode.
  • Typing grammar is Czech-only ("půl 10", "čtvrt na 10").
  • Long lists (step 15 = 96 rows) rely on scroll; there is no type-ahead inside the listbox, only in the input.

Source: docs/date-time/time-field.a11y.md · GitLab